<template>
  <div class="contribu section-title">
    <p class="info-title">关爱留守儿童计划 捐款记录</p>
    <div class="list">
      <div class="item">
        <span class="name">杜*娟</span>
        <span class="phone">138****2563</span>
        <span class="price">捐款<em>320.00</em>元</span>
      </div>
      <div class="item">
        <span class="name">杜*娟</span>
        <span class="phone">138****2563</span>
        <span class="price">捐款<em>320.00</em>元</span>
      </div>
      <div class="item">
        <span class="name">杜*娟</span>
        <span class="phone">138****2563</span>
        <span class="price">捐款<em>320.00</em>元</span>
      </div>
      <div class="item">
        <span class="name">杜*娟</span>
        <span class="phone">138****2563</span>
        <span class="price">捐款<em>320.00</em>元</span>
      </div>
      <div class="item">
        <span class="name">杜*娟</span>
        <span class="phone">138****2563</span>
        <span class="price">捐款<em>320.00</em>元</span>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    components: {
    },
    data () {
      return {
      }
    },
    created () {
    },
    methods: {
    }
  }
</script>

<style lang="stylus" scoped>
.contribu
  background-color #fff
  padding 0 1.6rem
  margin-bottom 1rem
  .info-title
    padding-top 2.5rem
    padding-bottom .8rem
    font-size 1.8rem
    color #333
    font-weight bold
  .item
    display flex
    border-bottom 1px solid #e6e6e6
    &:last-child
      border none
    span
      flex 1
      font-size 1.5rem
      color #999
      line-height 5rem
    .name
      width 7rem
      max-width 7rem
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
    .phone
      flex 2
    .price
      flex 1.5
      text-align right
      em
        color #A81E27
</style>
